<template>
  <div class="dispatch scheduling common-tabs-wrapper">
    <el-form class="order-search" size="small">
      <el-row type="flex">
        <el-form-item style="width: 130px" prop="cj">
          <el-select v-model="search.cj" @change="getData">
            <template #prefix>车间：</template>
            <el-option
              v-for="item in cjOption"
              :key="item.id"
              :label="item['key_value']"
              :value="item['key_value']"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 130px" prop="org">
          <el-select v-model="search.bc" @change="getData">
            <template #prefix>班次： </template>
            <el-option
              v-for="item in bcOption"
              :key="item.id"
              :label="item['key_value']"
              :value="item['key_value']"
            />
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <el-tabs v-model="active" type="card">
      <el-tab-pane
        v-for="(item, index) in gxOption1"
        :label="item.key_name"
        :name="item.key_value"
        :key="index"
      >
        <component
          :ref="'pane' + item.key_value"
          :is="item.component"
          :search="search"
          :wtOption="wtOption"
          @copyTemplate="copyTemplate"
          @delAll="delAll"
        ></component>
      </el-tab-pane>
    </el-tabs>
    <!-- 首页Dialog -->
    <el-dialog
      custom-class="scheduling-dialog"
      :visible.sync="dialogVisible"
      width="800px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div slot="title" class="img-title"></div>
      <el-form :model="search" label-position="top">
        <el-form-item label="组织">
          <el-radio
            v-model="search.org"
            v-for="(item, index) in orgOption"
            :key="index"
            :label="item['key_value']"
            border
            size="medium"
          />
        </el-form-item>
        <el-form-item label="车间">
          <el-radio
            v-model="search.cj"
            v-for="(item, index) in cjOption"
            :key="index"
            :label="item['key_value']"
            border
            size="medium"
          />
        </el-form-item>
        <el-form-item label="工序">
          <el-radio
            v-model="search.gongxu"
            v-for="(item, index) in gxOption1"
            :key="index"
            :label="item['key_value']"
            border
            size="medium"
            >{{ item['key_name'] }}</el-radio
          ></el-form-item
        >
        <el-form-item label="班次">
          <el-radio
            v-model="search.bc"
            v-for="(item, index) in bcOption"
            :key="index"
            :label="item['key_value']"
            border
            size="medium"
          />
        </el-form-item>
      </el-form>
      <div class="dialog-btn">
        <el-button @click="openCommon">看默认排班</el-button>
        <el-button type="primary" @click="confirmPage">确定查看</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Xisha from './modules/Scheduling/Xisha.vue';
import Qianfang from './modules/Scheduling/Qianfang.vue';
import Luotong from './modules/Scheduling/Luotong.vue';
import { copyTemplate, delAll } from '@/api/dispatch';
export default {
  components: { Qianfang, Xisha, Luotong },
  data() {
    return {
      search: {
        org: '恒源',
        cj: '五纺',
        gongxu: '2',
        bc: '甲班'
      },
      active: '1',
      gxOption1: [
        { key_value: '1', key_name: '前纺', component: 'Qianfang' },
        { key_value: '2', key_name: '细纱', component: 'Xisha' },
        { key_value: '3', key_name: '络筒', component: 'Luotong' }
      ],
      wtOption: [],
      dialogVisible: true
    };
  },
  watch: {
    active: function(val) {
      this.search.gongxu = val;
    }
  },
  computed: {
    orgOption() {
      return this.$store.getters.orgOption;
    },
    cjOption() {
      return this.$store.getters.cjOption;
    },
    gxOption() {
      return this.$store.getters.gxOption;
    },
    bcOption() {
      return this.$store.getters.bcOption;
    }
  },
  created() {
    this.$store.dispatch('common/getDict', {
      dict: 'team_number_ls',
      name: 'dh'
    });
  },
  methods: {
    confirmPage() {
      this.active = this.search.gongxu;
      this.$refs['pane1'][0].getSchedule();
      this.$refs['pane2'][0].getSchedule();
      this.$refs['pane3'][0].getSchedule();
      this.dialogVisible = false;
    },
    openCommon() {
      this.active = this.search.gongxu;
      this.$refs['pane1'][0].getYesterday();
      this.$refs['pane2'][0].getYesterday();
      this.$refs['pane3'][0].getYesterday();
      this.dialogVisible = false;
    },
    getData() {
      // this.$refs['pane' + this.active][0].getSchedule();
      this.$refs['pane1'][0].getSchedule();
      this.$refs['pane2'][0].getSchedule();
      this.$refs['pane3'][0].getSchedule();
    },
    async copyTemplate(gongxu, date) {
      let params = {
        bc: this.search.bc,
        gongxu: gongxu,
        time: date
      };
      const res = await copyTemplate(params);
      if (res.code == 1) {
        this.$message.success('复制成功');
      }
    },
    async delAll(gongxu, date) {
      let params = {
        bc: this.search.bc,
        gongxu: gongxu,
        time: date
      };
      const res = await delAll(params);
      if (res.code == 1) {
        this.$message.success('删除成功');
        this.$refs['pane' + this.active][0].getSchedule();
      }
    },
    changeTab(vue) {
      vue.$children[0].getSchedule();
    }
  }
};
</script>

<style lang="scss">
.scheduling-dialog.el-dialog {
  border-radius: 5px;
  overflow: hidden;
  .img-title {
    height: 66px;
    background: url('~@/assets/img/dispatch/schedule.png');
    background-size: 100% 100%;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body {
    padding: 23px 34px;
  }
  .el-form--label-top .el-form-item__label {
    padding: 0;
    height: 30px;
    line-height: 30px;
  }
  .el-radio__input {
    display: none;
  }
  .el-radio--medium.is-bordered {
    height: 34px;
    width: 107px;
    padding: 0;
    text-align: center;
    line-height: 34px;
    margin: 0 18px 0 0 !important;
    &:last-child {
      margin: 0 !important;
    }
    &.is-checked {
      border-color: #2c67f6;
      background: #eef6fe;
      & .el-radio__label {
        color: #2c67f6;
      }
    }
  }
  .el-radio--medium.is-bordered .el-radio__label {
    padding: 0;
  }
  .dialog-btn {
    display: flex;
    justify-content: center;
    .el-button {
      width: 105px;
      height: 32px;
      padding: 0;
      line-height: 32px;
      border-radius: 16px;
      border-color: #cfd4d8;
    }
    .el-button--primary {
      background: #2a83ff;
      border-color: #2a83ff;
    }
    .el-button + .el-button {
      margin-left: 23px;
    }
  }
}
</style>
